<template>
  <div class="container">
    <div class="signin-box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "center-box"
}
</script>

<style scoped lang="less">
.container{
  text-align: center;
}
@media only screen and (max-width: 600px){
  .signin-box{
    width:100%;
    height: 100vh;
    padding: 0px 20px;
    box-sizing: border-box;
    position: relative;
  }
}
@media only screen and (min-width: 600px){
  .container {
    width: 100%;
    height: 100vh;
    padding-top: 70px;
    background: url('~@/assets/images/bg.svg');
  }
  .signin-box{
    width:450px;
    margin:0 auto;
    background-color: #FFF;
    padding: 50px;
    position: relative;
  }
}
</style>
